<template>
  <div>
    <img :src="current_image" style="position: absolute;top: 0;left: 0;opacity: 0;width: 0;height: 0;">
    <qrcode id="23" style="position: absolute;top:0;left:0;opacity:0;" :size=70 :value="person_home" type="img"></qrcode>
    <div class="current_btn1" @click="changeImage()">
      <div class="current_btn_box">
        <i class="btn_icon iconfont icon-tupian"></i>
        <p class="btn_text">换图</p>
      </div>
    </div>
    <div class="current_btn2" @click="changeText()">
      <div class="current_btn_box">
        <i class="btn_icon iconfont icon-sheji1"></i>
        <p class="btn_text">换字</p>
      </div>
    </div>
    <!-- <img :src="imgSrc" id="imgBox" style="width: 100%;"> -->
    <div class="poster2img_btn" @click="getPath1Jump()">一键生成海报</div>
    <div :style="'zoom:'+ rdx +''">
      <canvas id="myCanvas" style="margin-bottom: 50px;"></canvas>
    </div>
  </div>
</template>
<script type='text/ecmascript-6'>
  import t from './../../api/public'
  import $ from 'jquery'
  import { LoadingPlugin, Qrcode } from 'vux'

  window.onload = function () {
    t.myStorage.setLocal('img_base64', $('#23 img')[0].currentSrc)
  }

  export default {
    components: {
      LoadingPlugin,
      Qrcode,
      $
    },
    data () {
      return {
        tid: 0,
        tempData: [],
        text1Data: [],
        imageData: [],
        current_image: '',
        current_img_num: 0,
        current_text: '',
        current_text_num: 0,
        personData: '',
        current_date: [],
        person_home: '',
        imgSrc: '',
        rdx: window.innerWidth / 750
      }
    },
    mounted () {
      document.body.title = '海报编辑'
      this.person_home = t.myStorage.getLocal('person_home')
      let myDate = new Date()
      this.current_date[0] = myDate.getFullYear()
      this.current_date[2] = myDate.getDate()
      this.current_date[4] = myDate.getMonth() + 1
      switch (myDate.getDay()) {
        case 0:
          this.current_date[3] = 'Sun'
          break
        case 1:
          this.current_date[3] = 'Mon'
          break
        case 2:
          this.current_date[3] = 'Tur'
          break
        case 3:
          this.current_date[3] = 'Wes'
          break
        case 4:
          this.current_date[3] = 'Thur'
          break
        case 5:
          this.current_date[3] = 'Fri'
          break
        case 6:
          this.current_date[3] = 'Satur'
          break
      }
      switch (myDate.getMonth() + 1) {
        case 1:
          this.current_date[1] = 'January'
          break
        case 2:
          this.current_date[1] = 'February'
          break
        case 3:
          this.current_date[1] = 'March'
          break
        case 4:
          this.current_date[1] = 'April'
          break
        case 5:
          this.current_date[1] = 'May'
          break
        case 6:
          this.current_date[1] = 'June'
          break
        case 7:
          this.current_date[1] = 'July'
          break
        case 8:
          this.current_date[1] = 'August'
          break
        case 9:
          this.current_date[1] = 'September'
          break
        case 10:
          this.current_date[1] = 'October'
          break
        case 11:
          this.current_date[1] = 'November'
          break
        case 12:
          this.current_date[1] = 'December'
          break
      }

      let that = this
      this.tid = document.location.href.split('#')[1].split('/')[3]
      t.xhr.getPost({
        siteId: 1,
        act: 'home/poster/posterinfo',
        data: {
          id: this.tid
        }
      }, function (data) {
        that.tempData = data.data.temp[0]
        that.text1Data = data.data.text1
        that.imageData = data.data.image
        that.current_image = that.tempData.image
        that.current_text = that.text1Data[0].text
        that.canvas2img()
      })

      t.xhr.getPost({
        siteId: 1,
        act: 'personal/homepage',
        data: {
          openid: t.myStorage.getLocal('openid')
        }
      }, function (data) {
        that.personData = data.data.user[0]
      })
    },
    /***
     * todo ssdsds
     */
    methods: {
      changeImage () {
        let count = this.imageData.length
        if (this.current_img_num >= (count - 1)) {
          this.current_img_num = 0
        } else {
          this.current_img_num++
        }
        this.current_image = this.imageData[this.current_img_num].image
        this.canvas2img()
        t.myStorage.setLocal('img_base64', $('#23 img')[0].currentSrc)
        this.pseron_home = t.myStorage.getLocal('person_home')
      },
      changeText () {
        let count = this.text1Data.length
        if (this.current_text_num >= (count - 1)) {
          this.current_text_num = 0
        } else {
          this.current_text_num++
        }
        this.current_text = this.text1Data[this.current_text_num].text
        this.canvas2img()
        t.myStorage.setLocal('img_base64', $('#23 img')[0].currentSrc)
        this.pseron_home = t.myStorage.getLocal('person_home')
      },
      canvas2img () {
        let that = this
        // that.$vux.loading.show({
        //   text: '正在加载'
        // })
        var mcanvas = document.getElementById('myCanvas')
        t.myStorage.setLocal('c_img', this.current_image)
        var cxt = mcanvas.getContext('2d')
        let wid = 1;
        // let hit = window.innerHeight;
        mcanvas.width = 750 / wid
        mcanvas.height = 1110 / wid

        this.preImage(that.current_image,function(x,y,width,height){   
          cxt.drawImage(this,x,y,width,height);  
          cxt.fillStyle = '#ffffff'
          cxt.font = 'normal normal bold 120px Arial'
          cxt.fillText(that.current_date[2], 20 /wid, 1110 * 0.92 / wid)
          cxt.font = 'normal normal normal 26px Arial'
          cxt.fillText(that.current_date[3] + '.' + that.current_date[1], 20 /wid, 1110 * 0.95 / wid)
          cxt.font = 'normal normal normal 22px Arial'
          cxt.fillText(that.current_date[0], 20 / wid, 1110 * 0.98 / wid)
          cxt.font = 'normal normal normal 26px Arial'
          cxt.fillText('by' + that.personData.nickname, 20 / wid, 854 / wid)

          that.preImage(t.myStorage.getLocal('img_base64'),function(x,y,width,height){   
            cxt.fillStyle = '#ffffff'
            cxt.fillRect(610 / wid, 950 / wid, 120 / wid, 140 / wid)
            cxt.drawImage(this,x,y,width,height);   
            cxt.font = '200 22px impact'
            cxt.fillText(that.current_text.slice(0, 25), 20 / wid, 721 / wid)
            cxt.fillText(that.current_text.substring(25), 20 / wid, 777 / wid)
            cxt.fillStyle = '#000000'
            cxt.font = '20px impact'
            cxt.fillText('扫我一下啊', 620 / wid, 1085 / wid)

          },{"x": 620 / wid, "y": 960 / wid, "width" :100 / wid ,"height" :100 / wid});

        },{"x":0,"y":0,"width":750 / wid,"height":1110 / wid});
      },
      getPath1Jump() {
        var that = this
        that.$vux.loading.show({
          text: '正在生成海报'
        })
        this.getPath()
        .then(data => {
          that.$router.push('/poster/mian/' + that.tid + '/userid/' + t.myStorage.getLocal('openid'))
          that.$vux.loading.hide()
        });
      },
      getPath() {
        var imgData = new Promise(function(resolve, reject){
          let _imgData = document.getElementById('myCanvas').toDataURL('image/jpeg', 0.5)
          t.myStorage.setLocal('img2', _imgData)
          resolve(_imgData);
        });
        return imgData;            
      },
      preImage(url,callback,wo){
        var img = new Image(); //创建一个Image对象，实现图片的预下载    
        img.src = url;        
        if (img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数    
          callback.call(img,wo.x,wo.y,wo.width,wo.height);    
          return; // 直接返回，不用再处理onload事件    
        }     
        img.onload = function () { //图片下载完毕时异步调用callback函数。    
          callback.call(img,wo.x,wo.y,wo.width,wo.height);//将回调函数的this替换为Image对象    
        };    
      },
    }
  }
</script>
<style scoped="true">
.poster2img_btn {
    position: fixed;
    bottom: 0px;
    width: 100%;
    height: 45px;
    line-height: 45px;
    text-align: center;
    background-color: #ffffff;
  }
  .current_btn2 {
    position: absolute;
    top: 90px;
    right: 10px;
    width: 70px;
    height: 70px;
    background-color: rgba(255, 255, 255, .6);
    border-radius: 50%;
    z-index: 99;
  }
  .current_btn1 {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 70px;
    height: 70px;
    background-color: rgba(255, 255, 255, .6);
    border-radius: 50%;
    z-index: 99;
  }
  .current_btn_box {
    position: relative;
    top: 5px;
    left: 5px;
    width: 60px;
    height: 60px;
    background-color: #6ccac4;
    border-radius: 50%;
    text-align: center;
  }
  .btn_text {
    position: relative;
    top: 10px;
    font-size: 12px;
    color: #ffffff;
  }
  .btn_icon {
    position: relative;
    font-size: 18px;
    color: #ffffff;
    top: 8px;
  }
</style>
